<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">

<link rel="stylesheet"
	href="../../../css/Semantic-UI-CSS-master/semantic.min.css" />

<link rel="stylesheet" href="../../../js/layui/css/layui.css"
	media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<script src="../../../js/vue/vue.js"></script>
<style>
.container {
	padding-top: 10px;
	margin-left: 10px;
}

#zth-top-icon {
	font-size: 25px;
	width: 50px;
	cursor: pointer;
}

.zth-top-input {
	width: 80px;
	height: 25px;
	border: 1px gray solid;
	border-radius: 5px;
	color: gray;
	font-family: '楷体'
}

.pass {
	display: inline-block;
	width: 100px;
	text-align: center;
	margin-left: 30px;
	background: green;
	color: white;
	border-radius: 5px;
	font-family: '楷体'
}

.not {
	display: inline-block;
	width: 100px;
	text-align: center;
	margin-left: 30px;
	background: red;
	color: white;
	border-radius: 5px;
	font-family: '楷体'
}

.zth-top-text {
	border-bottom: 2px #009E94 solid;
	line-height: 30px;
	padding-left: 20px;
	font-size: 18px;
	font-family: "楷体";
}
</style>
</head>
<body>
	<div id="app">
		<div class="zth-top-text">标签管理</div>
		<div class="container">
			<div class="demoTable">
				<div class="zth-zth-icons">
					<script type="text/html" id="toolbarDemo">
							<i class="plus icon " lay-event="add" id="zth-top-icon"></i>
							<i class="trash alternate icon" lay-event="delBatch" id="zth-top-icon"></i>
					</script>
				</div>
				<div class="demoTable">
					标签名：
					<div class="layui-inline">
						<input class="layui-input" name="tag_name" id="tag_name"
							autocomplete="off">
					</div>
					<button class="layui-btn" data-type="reload">搜索</button>
				</div>
				<table class="layui-hide" id="test" lay-filter="test"></table>
			</div>
		</div>
	</div>
	<script src="../../../js/layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script>
		layui.use('table', function() {
			var table = layui.table;

			//方法级渲染
			table.render({
				elem : '#test',
				url : '/ssb/tag/tagAll',
				toolbar : '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
				id : 'testReload',
				cellMinWidth : 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
				,
				cols : [ [ {
					type : 'checkbox'
				}, {
					field : 'tag_name',
					title : '标签名称'
				}, {
					field : 'create_time',
					title : '添加时间',

				}

				] ],
				page : true,
				parseData : function(res) { //将原始数据解析成 table 组件所规定的数据
					res.status = 0;
					return {
						"code" : res.code, //解析接口状态
						"msg" : res.msg, //解析提示文本
						"count" : res.count, //解析数据长度
						"data" : res.list
					//解析数据列表
					//解析数据列表
					};
				}
			});

			var $ = layui.$, active = {
				reload : function() {
					var demoReload = $('#demoReload');

					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : {
							key : {
								id : demoReload.val()
							}
						}
					}, 'data');
				}
			};

			//头工具栏事件
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				var data = checkStatus.data;
				switch (obj.event) {
				case 'add':
					layer.open({
						type : 2,
						area : [ '600px', '500px' ],
						fixed : false, //不固定
						maxmin : true,
						content : 'add.html'
					});

					break;

				case 'delBatch':
					//批量删除
					if (data.length == 0) {
						layer.msg('请选择要删除的数据');
					} else {
						layer.confirm('真的删除行吗', function(index) {
							layer.close(index);
							//删除数据逻辑
							//获取要删除数据的id
							var ids = [];
							for (var i = 0; i < data.length; i++) {
								ids.push(data[i].tag_id);
							}

							$.ajax({
								url : "/ssb/tag/deleteBatch",
								data : {
									"ids" : ids
								},
								success : function(res) {
									console.log(res);
									if (res > 0) {
										layer.alert("删除成功！");
										//执行重载
										table.reload('testReload');
									} else {
										layer.alert("删除失败！");
									}
								}
							});
						});
					}

					break;
				}
				;
			});
			
			//根据标签名查询
			var active = {
				reload : function() {
					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : {
							tag_name : $("#tag_name").val()
						}
					}, 'data');
				}
			};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

		});
	</script>

</body>
</html>
